<template>
  <view class="home">
    <!-- 顶部搜索栏 -->
    <view class="header">
      <view class="flex-row">
        <!-- 城市选择 -->
        <view class="city-select">
          <picker :range="cityList" @change="onCityChange">
            <view class="picker-text">
              {{currentCity}}
              <text class="iconfont icon-arrow-down"></text>
            </view>
          </picker>
        </view>
        <!-- 搜索框 -->
        <view class="search-box" @tap="goToSearch">
          <view class="search-input">
            请输入电影、影院名称
          </view>
        </view>
      </view>
    </view>

    <!-- 轮播图组件 -->
    <my-swiper></my-swiper>

    <!-- 功能导航 -->
    <view class="nav-grid">
      <view class="nav-item" @tap="goToHotMovies">
        <image src="/static/images/fire.png" mode="aspectFit"></image>
        <text>正在热映</text>
      </view>
      <view class="nav-item" @tap="goToCinema">
        <image src="/static/images/cinema.png" mode="aspectFit"></image>
        <text>影院</text>
      </view>
    </view>

    <!-- 正在热映区域 -->
    <view class="main-container">
      <view class="section">
        <view class="section-header">
          <text class="title">正在热映</text>
          <view class="more" @tap="goToMovieList(1)">
            共{{movieList.length}}部
            <image class="more-arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <scroll-view class="movie-list" scroll-x>
          <view class="movie-item" v-for="(item, index) in movieList.slice(0, 10)" :key="index" @tap="goToMovieDetail(item.movie_id)">
            <image class="movie-poster" 
                   :src="getPoster(item.poster)" 
                   mode="aspectFill">
            </image>
            <view class="movie-info">
              <text class="movie-name">{{item.movie_name}}</text>
            </view>
            <button class="buy-btn" 
                    @tap.stop="goToSelectCinema(item.movie_id)">
              购买
            </button>
          </view>
        </scroll-view>
      </view>

      <!-- 即将上映区域 -->
      <view class="section">
        <view class="section-header">
          <text class="title">即将上映</text>
          <view class="more" @tap="goToMovieList(0)">
            共{{notShowMovieList.length}}部
            <image class="more-arrow" src="/static/images/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <scroll-view class="movie-list" scroll-x>
          <view class="movie-item" v-for="(item, index) in notShowMovieList.slice(0, 10)" :key="index" @tap="goToMovieDetail(item.movie_id)">
            <image class="movie-poster" 
                   :src="getPoster(item.poster)" 
                   mode="aspectFill">
            </image>
            <view class="movie-info">
               <text class="movie-name">{{item.movie_name}}</text>
               <text class="wish-number">{{item.wish_num}}人想看</text>
            </view>
            <view class="presell-info">
                <text class="date">{{formatDate(item.show_date)}} 上映</text>
                <button class="presell-btn" @tap.stop="goToSelectCinema(item.movie_id)">
                  预售
                </button>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import mySwiper from '@/components/index/my-swiper.vue'
export default {
  components: {
    mySwiper
  },
  data() {
    return {
      currentCity: '南充',
      cityList: ['南充', '深圳', '北京', '上海', '广州'],
      movieList: [],
      notShowMovieList: []
    }
  },
  
  onLoad() {
    this.loadMovieInfo()
  },
  
  methods: {
    // 加载电影信息
    loadMovieInfo() {
      uni.request({
        url: 'http://localhost:9090/getMoviesForApp',
        method: 'GET',
        success: (res) => {
          if (res.data.code === 1) {
            // 映射正在热映的电影数据
            this.movieList = res.data.nowShowingMovies.map(movie => ({
              movie_id: movie.id,
              movie_name: movie.name,
              poster: movie.poster,
              score: movie.score
            }));
            
            // 映射即将上映的电影数据
            this.notShowMovieList = res.data.comingSoonMovies.map(movie => ({
              movie_id: movie.id,
              movie_name: movie.name,
              poster: movie.poster,
              wish_num: movie.wishNum || 0,
              show_date: movie.show_date // 模板需要show_date来显示上映日期
            }));
            
            // 排序
            this.movieList.sort((a, b) => b.score - a.score);
            this.notShowMovieList.sort((a, b) => b.wish_num - a.wish_num);
          } else {
            uni.showToast({
              title: '获取电影列表失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
        }
      });
    },

    // 获取海报图片
    getPoster(path) {
      if (!path) return '';
      if (path.startsWith('http')) {
        return path;
      }
      return 'http://localhost:9090' + path
    },

    // 格式化日期
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date)
      return `${String(d.getMonth() + 1).padStart(2, '0')}月${String(d.getDate()).padStart(2, '0')}日`
    },

    // 页面跳转方法
    goToSearch() {
      uni.navigateTo({
        url: '/pages/search/search'
      })
    },

    goToHotMovies() {
      // 告诉电影页面，要显示"正在热映"
      uni.$emit('updateMovieList', { type: 1 }); 
      uni.switchTab({
        url: '/pages/movie/movie'
      });
    },

    goToCinema() {
      uni.switchTab({
        url: '/pages/cinema/cinema'
      });
    },

    goToMovieDetail(movieId) {
      uni.navigateTo({
        url: `/pages/movie-detail/movie-detail?movie_id=${movieId}`
      })
    },

    goToSelectCinema(movieId) {
      uni.navigateTo({
        url: `/pages/select-cinema/select-cinema?movie_id=${movieId}`
      })
    },

    goToMovieList(type) {
      // 1. 发出一个全局事件，把要看"热映"还是"即将上映"的类型（1 或 0）传递过去
      uni.$emit('updateMovieList', { type });

      // 2. 跳转到 tabBar 页面
      uni.switchTab({
        url: '/pages/movie/movie'
      });
    },

    onCityChange(e) {
      this.currentCity = this.cityList[e.detail.value]
    }
  }
}
</script>

<style>
/* 通用基础样式 */
.home {
  min-height: 100vh;
  background-color: #f7f8fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

/* 顶部区域 */
.header {
  background-color: #fff;
  padding: 16rpx 24rpx;
  border-bottom: 1px solid #f0f0f0;
}

.flex-row {
  display: flex;
  align-items: center;
}

.city-select {
  margin-right: 20rpx;
}

.picker-text {
  font-size: 30rpx;
  color: #333;
}

.picker-text .iconfont {
  font-size: 24rpx;
  margin-left: 8rpx;
}

.search-box {
  flex: 1;
  background-color: #f7f8fa;
  height: 64rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  padding: 0 24rpx;
}

.search-input {
  color: #999;
  font-size: 28rpx;
}

/* 功能导航 */
.nav-grid {
  display: flex;
  background-color: #fff;
  padding: 20rpx 0;
}

.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-item image {
  width: 56rpx;
  height: 56rpx;
  margin-bottom: 12rpx;
}

.nav-item text {
  font-size: 26rpx;
  color: #333;
}

/* 电影内容区 */
.main-container {
  padding: 0 24rpx;
}

.section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  margin-top: 24rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.more {
  font-size: 26rpx;
  color: #999;
  display: flex;
  align-items: center;
}

.more-arrow {
  width: 24rpx;
  height: 24rpx;
  margin-left: 8rpx;
}

.movie-list {
  white-space: nowrap;
}

.movie-item {
  display: inline-flex;
  flex-direction: column;
  width: 210rpx;
  margin-right: 20rpx;
  vertical-align: top;
}
.movie-item:last-child {
  margin-right: 0;
}

.movie-poster {
  width: 210rpx;
  height: 295rpx;
  border-radius: 12rpx;
  background-color: #eee;
}

.movie-info {
  margin-top: 16rpx;
  display: flex;
  flex-direction: column;
}

.movie-name {
  font-size: 28rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8rpx;
}

.wish-number {
  font-size: 24rpx;
  color: #ffb400;
}

.buy-btn, .presell-btn {
  width: 100%;
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 26rpx;
  font-weight: 500;
  margin-top: 12rpx;
  border-radius: 30rpx;
  padding: 0;
}

.buy-btn {
  background: linear-gradient(to right, #ff8c5a, #ff5f16);
  color: #fff;
}

.presell-btn {
  background: linear-gradient(to right, #4da6ff, #2d8cf0);
  color: #fff;
}

.presell-info {
  margin-top: 12rpx;
}

.date {
  font-size: 24rpx;
  color: #999;
  display: block;
  margin-bottom: 8rpx;
}
</style>